<template>
  <!-- 组件根标签 -->
  <div>
    <!-- <h2>我是我的资料</h2> -->
    <hmnavbar title="我的个人资料" @back="$router.push('/my')"></hmnavbar>
    <div class="info">
      <!-- 头像 -->
      <van-cell
        @click="toEditinfo('avatar')"
        title="头像"
        is-link
        class="youxiang"
        center
      >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #default>
          <img :src="baseURL + user.avatar" alt="" />
        </template>
      </van-cell>
      <!-- 信息 -->
      <van-cell-group class="userinfo">
        <van-cell
          title="昵称"
          :value="user.nickname"
          is-link
          @click="toEditinfo('nickname')"
        />
        <van-cell
          title="性别"
          :value="genderObj[user.gender]"
          is-link
          @click="changeGender"
        />
        <van-cell
          title="地区"
          :value="areaList.city_list[user.area]"
          is-link
          @click="changeArea"
        />
        <van-cell
          @click="toEditinfo('intro')"
          title="个人简介"
          :value="user.intro"
          is-link
        />
      </van-cell-group>
      <!-- 退出按钮 -->
      <van-button type="default" size="large" class="mybtn" @click="tuichu"
        >退出登录</van-button
      >
    </div>

    <!-- 修改性别的弹出框 -->
    <van-popup
      v-model="genderShow"
      position="bottom"
      :style="{ height: 'auto' }"
    >
      <van-picker
        show-toolbar
        :default-index="user.gender"
        :columns="userGenders"
        @confirm="genderConfirm"
        @cancel="genderCancel"
        v-if="pickerShow"
    /></van-popup>

    <!-- 修改地区的弹出框 -->
    <van-popup v-model="areaShow" position="bottom" :style="{ height: 'auto' }">
      <van-area
        @confirm="editArea"
        :value="user.area"
        title="标题"
        :area-list="areaList"
        :columns-num="2"
        v-if="areajingmoShow"
      />
    </van-popup>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
// 导入三级联动的省市区名称
import { areaList } from '@vant/area-data'
import { removeToken } from '@/utils/token'
import { editUserinfo } from './../../../api/login'

export default {
  data () {
    return {
      // 基地址
      baseURL: process.env.VUE_APP_BaseURL,
      // 三级联动的城市名称
      areaList,
      // genderShow 性别面板的显示标识
      genderShow: false,
      // 地区面板弹出
      areaShow: false,
      // 性别数组
      userGenders: ['未知', '男', '女'],
      pickerShow: true, // 静默刷新使用的布尔
      areajingmoShow: true // 静默刷新的地区
    }
  },
  methods: {
    // 硬射store中的方法
    ...mapMutations(['setIslogin']),
    ...mapActions(['setUserinfo']),

    tuichu () {
      this.$dialog
        .confirm({
          title: '',
          message: '你确定要退出吗?'
        })
        .then(() => {
          console.log('确定')
          // 确定退出后
          // 1.删除token
          removeToken('token')
          // 2.将用户的登陆状态改为false
          this.setIslogin(false)
          // 3.跳转到登陆页面
          this.$router.push('/login')
        })
        .catch(() => {
          console.log('取消')
        })
    },
    // 修改弹框的显示与隐藏
    changeGender () {
      this.genderShow = true
      // 让其静默为false
      this.pickerShow = false
      // 然后100毫秒后,让其显示
      setTimeout(() => {
        this.pickerShow = true
      }, 200)
    },

    // Picker选择器的事件
    // 点击确定
    async genderConfirm (value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
      this.$toast({
        type: 'loading',
        message: '修改中....',
        duration: 0
      })
      // 根据当前确定的索引发送修改数据的请求
      await editUserinfo({
        gender: index
      })

      // 因为调用修改接口后返回的数据,少了一些数据,所以不能直接赋值给state中
      // 所以重新发起获取用户数据的请求 -- 封装到store的actions属性中
      this.$store.dispatch('setUserinfo')

      // 关闭永久加载提示
      this.$toast.clear()

      // 然后关闭弹框
      this.genderShow = false
    },
    // 点击取消
    genderCancel () {
      // this.$toast('取消')
      this.genderShow = false
    },

    // 地区弹框的显示
    changeArea () {
      this.areaShow = true
      this.areajingmoShow = false
      setTimeout(() => {
        this.areajingmoShow = true
      }, 100)
    },

    // 修改地区
    async editArea (arr) {
      console.log(arr)
      console.log(arr[1].code)

      this.$toast({
        type: 'loading',
        message: '修改中....',
        duration: 0
      })

      await editUserinfo({
        area: arr[1].code
      })
      // 更新用户数据,使用vuex中的actions中的异步方法 -- 硬射
      this.setUserinfo()

      this.areaShow = false
      this.$toast.clear()
    },

    // 跳转对应的编辑页面
    toEditinfo (prop) {
      this.$router.push(`/editinfo?protoype=${prop}`)
    }
  },

  // 硬射store中的数据
  computed: {
    ...mapState(['user', 'genderObj'])
  }
}
</script>
<style lang="less">
.info {
  height: 100vh;
  background-color: #f7f4f5;
  padding: 15px;
  .youxiang {
    border-radius: 10px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .userinfo {
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
  }
  .mybtn {
    border-radius: 10px;
  }
  .van-button__text {
    color: red;
  }
}
</style>
